<template>
  <div class="about_us">
    <van-nav-bar
        :title="$t('about_us')"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <div class="about_us_wrapper">
      <div class="wrapper_bg">
        <img class="image" src="../../../../assets/icon_logo.png">
      </div>
      <div class="content">
        <label class="label">{{ $t('contact_tel') }} : </label>
        <span class="link">{{ info.servicePhone }}</span>
      </div>
      <div class="content">
        <label class="label">{{ $t('email') }} : </label>
        <span class="link">{{ info.mail }}</span>
      </div>
      <!--      关于我们-->
      <div class="describe">
        <div class="label">{{ $t('about_us') }}</div>
        <div class="content">{{ info.aboutContent }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {fetchAboutInfo} from '@/api/my'
import {ref} from "vue";
import {useStore} from "vuex";

export default {
  setup() {
    const info = ref({})
    const store = useStore()
    const fetchAbout = async () => {
      const res = await fetchAboutInfo({
        loanProductName: localStorage.getItem('productName')
      })
      if (res.code === 1 && res.data) {
        info.value = res.data
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    }
    fetchAbout()
    return {
      info
    }
  }
}
</script>

<style scoped lang="less">
.about_us {
  background-color: #FFFFFF;
  height: 100vh;
  .van-picker__confirm {
    color: #FF5252 !important;
  }

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  .about_us_wrapper {

    .wrapper_bg {
      height: 180px;
      width: 100%;
      position: relative;
      overflow: hidden;

      .image {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 46px;
        width: 46px;
        transform: translate(-50%, -50%);
        z-index: 2;
      }
    }

    .wrapper_bg::before {
      width: 140%;
      height: 150px;
      position: absolute;
      left: -20%;
      top: -1px;
      content: '';
      border-radius: 0 0 50% 50%;
      background: linear-gradient(180deg, #FF5252, #FF8244);
      z-index: 1;
    }

    .content {
      text-align: center;
      font-size: 14px;
      margin-top: 10px;

      .label {

      }

      .link {
        color: #FF5651;
        font-weight: 600;
        border-bottom: solid 1px #FF5651;
      }
    }

    .describe {
      margin-top: 20px;

      .label {
        text-align: center;
        font-size: 14px;
      }

      .content {
        text-align: left;
        box-sizing: border-box;
        padding: 15px 30px;
      }
    }
  }
}

</style>
